<template>
	<view style="display: flex;flex-direction: column;">
		<view class="avatar">
			<view style="margin-bottom: 50rpx;">
				<view style="height: 134rpx;padding-top: 62rpx;padding-left: 10px;">
					<image style="width: 260rpx;height: 90rpx;" src="/static/image/logo.png" mode="aspectFit" />
				</view>
			</view>
			<view class="search" style="background-color: transparent;margin-bottom:18rpx ;">
				<u-search v-model="keywords" :show-action="false" placeholder="搜索公告名称" @custom="search"
					@search="search"></u-search>
			</view>
		</view>

		<view style="flex: 1;">
		
			<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore" :refresher-enabled="true"
				:refresher-triggered="triggered" @refresherrefresh="refresherrefresh">
				<view v-for="(item,index) in list" :key="item.code"
					style="border: 1px solid #fff;margin: 10px;border-radius:10px;padding: 10px;background-color: #fff;">
					<!-- <view @click="toDetails(item,index)">
			
						<view style="display: flex;">
							<image mode="aspectFit"
								:src="item.picUrl?vuex_config.baseUrl + item.picUrl:''"
								style="width: 160rpx;height: 160rpx;margin-right: 10px;border-radius: 50%;border: 1px solid #aaa;"></image>
							<view style="flex:1;display: flex;justify-content: space-between; flex-direction: column;padding: 10px 0;">
								<view style="font-size: 16px;font-weight: bold; 
							   width: 100%;  overflow: hidden;white-space: nowrap;  text-overflow: ellipsis;">
									<text>{{item.ctitle}}</text>
								</view>
								<view style="color: #e5d001;">
									发布时间：{{item.fbDate}}
								</view>
			
							</view>
						</view>
						<view style="
							font-size: 15px;
							margin-top: 10px;
							display: -webkit-box;
							-webkit-box-orient: vertical; 
							-webkit-line-clamp: 3; 
							overflow: hidden; 
							text-overflow: ellipsis;
							line-height:26px;
							text-indent:30px;
						">
							{{item.simpleContent}}
						</view>
			
					</view> -->


					<view @click="toDetails(item,index)">

						<view style="display: flex;">
							<view class="item-menu-image" style="padding:30rpx 30rpx;margin-right: 20rpx;">
								<view
									style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
									<image mode="aspectFit"
										:src="item.picUrl?vuex_config.baseUrl + item.picUrl:''"
										></image>
								</view>
							</view>

							<view
								style="flex:1;overflow: hidden;font-size: 28rpx;display: flex;flex-direction: column;justify-content: space-between; ">
								<view class="">
									<view style="
										flex: 1;
										font-weight: 900;
										width: 100%;
										display: -webkit-box;
										-webkit-box-orient: vertical; 
										-webkit-line-clamp: 1; 
										overflow: hidden; 
										text-overflow: ellipsis;">
										{{item.ctitle}}
									</view>
									<view style="
										margin-top: 20rpx;
										color: #ffaa00;
										flex: 1;
										font-weight: 900;
										width: 100%;
										display: -webkit-box;
										-webkit-box-orient: vertical; 
										-webkit-line-clamp: 2; 
										overflow: hidden; 
										text-overflow: ellipsis;
									">
										{{item.simpleContent}}
									</view>
								</view>

								<view style="font-size: 26rpx;">
									发布时间：{{item.fbDate}}
								</view>

							</view>
						</view>

					</view>


				</view>
				<view class="loadmore">
					<u-loadmore :status="loadStatus"></u-loadmore>
				</view>
			</scroll-view>
		</view>

	</view>
</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
	 */
	export default {
		data() {
			return {
				triggered: false,
				keywords: '',
				loadStatus: 'loadmore',
				query: {
					pageNo: 1,
					pageSize: 20,
				},

				list: [],

			};
		},
		onShow() {
			this.query.pageNo = 1;
			this.loadList();
		},
		onLoad() {},
		methods: {
			async refresherrefresh() {
				console.log(22222);
				this.triggered = true
				this.query.pageNo = 1;
				await this.loadList()
				this.triggered = false
			},
			toDetails(item, index) {
				let that = this
				console.log(item, index, '111====');
				console.log(this.list[index], 'item====');
				uni.navigateTo({
					url: '/pages/btdm/index/notice/noticeDetails',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// 其中含有两个参数，第一个是接收的函数名，第二个则是需要携带的参数
						res.eventChannel.emit('acceptDataFromOpenerPage', that.list[index])
					}
				});

			},
			loadList(type) {
				this.$u.api.shop.noticeListData(this.query).then(res => {
					if (res.list.length < 20 || res.list.length == 0) {
						this.loadStatus = "nomore";
					}
					var list = res.list;
					if (type == "add") {
						for (var i = 0; i < list.length; i++) {
							this.list.push(list[i])
						}
					} else {
						this.list = list;
					}
					console.log(this.list, 'this.list====');
				})

			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.pageNo += 1;
					this.loadList("add");
				}, 100);
			},

			search(value) {
				this.query.ctitle = value
				this.query.pageNo = 1;
				this.loadList();
				// this.$u.toast('搜索内容为：' + value)
			}

		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.item-menu-image {
		background: url('/static/image/orderBg.jpg') no-repeat;
		background-size: 100%;
		// width: 340rpx ;
		// height: 190rpx;
		width: 200rpx;
		height: 175rpx;
	}

	.avatar {
		background: url('/static/image/homeAvatar.jpg');
	}
	.scroll-list {
	    height: calc(100vh - 300rpx);
	    width: 100%;
	}
</style>